/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import * as esriLoader from 'esri-loader';
import { Button } from "antd";
import icon from "../../image/gis_5g_station_normal.svg";
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);

export const MapPointCurd: React.FC = () => {
    function componentDid() {

        esriLoader.loadModules([
            'esri/map',
            "dojo/dom",
            "dojo/on",
            "esri/geometry/Point",
            "esri/symbols/PictureMarkerSymbol",
            "esri/graphic",
            "esri/InfoTemplate",
        ]).then(([Map, dom, on, Point, PictureMarkerSymbol, Graphic, InfoTemplate]) => {
            const map = new Map('mapCon', {
                basemap: 'topo-vector',
                center: [116.403414, 39.924091],
                zoom: 13
            });
            
            on(dom.byId('addOne'), 'click', addOne);
            on(dom.byId('upadteInfo'), "click", upadteInfo);
            on(dom.byId("deleteOne"), "click", deleteOne);

            function addOne () {
                map.graphics.clear();
                var newPoint = new Point(116.403414, 39.924091);
                var picSymbol = new PictureMarkerSymbol(icon, 50, 50);
                var picGraphic = new Graphic(newPoint, picSymbol);
                var infoTemplate = new InfoTemplate();
                infoTemplate.setTitle("今天天气真晴朗");
                infoTemplate.setContent('<div>一颗绿油油的树</div>');
                picGraphic.setInfoTemplate(infoTemplate);
                map.graphics.add(picGraphic);
            }

            function upadteInfo () {
                map.graphics.clear();
                var newPoint = new Point(116.403414, 39.924091);
                var picSymbol = new PictureMarkerSymbol(icon, 50, 50);
                var picGraphic = new Graphic(newPoint, picSymbol);
                var infoTemplate = new InfoTemplate();
                infoTemplate.setTitle("更新后的");
                infoTemplate.setContent('<div>更新后的一颗绿油油的树</div>');
                picGraphic.setInfoTemplate(infoTemplate);
                map.graphics.add(picGraphic);
            }

            function deleteOne () {
                map.graphics.clear();
            }
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div id="mapCon">
            <div className={'div-option'} style={{position: 'absolute', right: '3%', top: '3%', display: 'grid', zIndex: 9999}}>
                <Button type={'primary'} id="addOne">添加单个标记点</Button>
                <Button type={'primary'} id="upadteInfo">更新标记点内容</Button>
                <Button type={'primary'} id="deleteOne">清除覆盖物</Button>
            </div>
        </div>
    )
}
